<template>
    <div>
        <section class="content-header clearfix">
            统计分析
            <span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>及时率统计
            <span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>超时工单
        </section>
        <section class="content-main clearfix">
            <div class="col-sm-4 clearfix">
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker1" @mousedown="selectDate1" placeholder="YYYY-MM-DD" v-model="timeData.eventTimeStart">
                    </div>
                </div>
                <div class="col-sm-1" style="height:34px;line-height:34px;padding:0;text-align:center">
                    <span>--</span>
                </div>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker2" @mousedown="selectDate2" placeholder="YYYY-MM-DD" v-model="timeData.eventTimeEnd">
                    </div>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-6 clearfix">
                    <orderArea v-model="timeData.eventArea" />
                </div>
                <div class="col-sm-2 col-sm-offset-1">
                    <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button>
                </div>
            </div>
            <div class="col-sm-4 clearfix">

                <div class="col-sm-2 col-sm-offset-10">
                    <button type="button" class="btn btn-primary">导出</button>
                </div>
            </div>
        </section>
        <div class="box-body">
            <table id="example2" border class=" table-hover">
                <thead>
                    <tr>
                        <th style="width:13%;">事件编号</th>
                        <th style="width:13%;">事件名称</th>
                        <th style="width:13%;">发生时间</th>
                        <th style="width:13%;">事件描述</th>
                        <th style="width:13%;">片区</th>
                        <th style="width:13%;">责任人</th>
                        <th style="width:13%;">处理部门</th>
                        <th style="width:9%;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in overTimeData" :key="item.value">
                        <td>{{item.orderId}}</td>
                        <td>{{item.orderName}}</td>
                        <td>{{item.orderCreatedate}}</td>
                        <td>{{item.orderDesc}}</td>
                        <td>{{item.orderArea}}</td>
                        <td>{{item.orderPerson}}</td>
                        <td>{{item.orderDept}}</td>
                        <td>查看</td>

                    </tr>
                </tbody>
            </table>
            <div class="col-md-4 col-md-offset-8" style="margin-top:50px;">
                <ctrlPage :setPage="getOvertimeEvent" :type="type" ref="page" />
            </div>
            <!-- <div class="col-md-6 col-md-offset-6" style="margin-top:50px;">
                <pagination @pagination="getSelEvents" :options="paginationData"></pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";
import orderArea from "@/components/common/orderArea.vue";
import utils from "@/utils";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            timeData: {
                eventTimeStart: utils.nowDate(-7),
                eventTimeEnd: utils.nowDate(0),
                eventArea: ""
            },
            total: "",
            overTimeData: {}
        };
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    components: {
        orderArea,
        ctrlPage
    },
    methods: {
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.eventTimeEnd = ev.target.value;
                });
        },
        getOvertimeEvent(pageIndex, rows, callback) {
            this.$api.tongji.home
                .overtimeEvent({
                    pageNum: pageIndex || 1,
                    eventTimeStart: this.timeData.eventTimeStart,
                    eventTimeEnd: this.timeData.eventTimeEnd,
                    eventArea: this.timeData.eventArea
                })
                .then(res => {
                    if (res.success) {
                        console.log(this.timeData);
                        this.overTimeData = res.data.list;
                        this.total = res.data.total;
                        callback(this.overTimeData, this.total);
                    }
                });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-body {
    margin: 10px 5px 0;
    table {
        th {
            text-align: center;
            padding: 10px;

        }
        td{
            padding: 10px;
        }
    }
}
</style>
